<script setup>
  import Order from './order.vue'
  import Pay from './pay.vue'
  import Complete from './complete.vue'
  import {t} from '@/locales'

  const route = useRoute()
  const query = ref(route.query)
  // 下单状态
  const tabIndex = ref(2)
  // 下单步骤
  const tabList = computed(() => {
    // status: 0(待付款) 1(待发货) 2(待收货) 3(已完成)
    return [
      { label: t('commodity.toRoder'), comp: Order, isFinish: true },
      { label: t('commodity.pay'), comp: Pay, isFinish: tabIndex.value===2 },
      { label: t('commodity.paySuceess'), comp: Complete, isFinish: tabIndex.value===2 }
    ]
  })

  watch(() => route.query, (val) => {
    query.value = val
    init()
  }, { deep: true })

  function init (index) {
    const { cartIds } = query.value
    if(index) {
      tabIndex.value = index
    } else {
      tabIndex.value = cartIds ? 0 : 1
    }
  }

  init()
</script>

<template>
  <div class="shopping">
    <div class="tab-box">
      <van-row  gutter="24">
        <van-col
          span="8"
          v-for="(it, i) in tabList"
          :key="i"
          :class="['tab-item', it.isFinish?'active':'']"
        >
          <p>{{i+1}}.{{it.label}}</p>
        </van-col>
      </van-row>
    </div>
    <component
      :is="tabList[tabIndex].comp"
      @reload="init"
      :query="query"/>
  </div>
</template>

<style scoped lang="scss">
  .shopping {
    .p16 {
      padding: 16px;
    }
    .tab-box {
      padding: 16px 16px 0;
      border-bottom: 1px solid #E5E5E5;
      .tab-item {
        font-size: 12px;
        color: #8C8C8C;
        p {
          border-bottom: 2px solid #8C8C8C;
          padding-bottom: 5px;
        }
        &.active {
          font-weight: 600;
          color: #262626;
          p {
            border-color: #262626;
          }
        }
      }
    }
  }
</style>